<template>
  <div class="notice-list">
    <Navbar title="公告列表"/>
    <div class="content bg-dollar">
      <ul class="list">
        <li @click="goDetail">
          <div class="con">
            <h3>【独角兽-财富之星】</h3>
            <p>2023/07/30 14:32:52</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar/index.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goDetail = () => {
  router.push({
    path: '/noticeDetails'
  })
}

</script>

<style scoped lang='scss'>
.notice-list {
  .content {
    min-height: 100vh;
    margin-top: 2.875rem;
    .list {
      padding: 0.9375rem;
      li {
        margin-bottom: 0.625rem;
        border-radius: 0.75rem;
        border: 1px solid rgb(68, 78, 104);
        background: linear-gradient(rgba(71, 71, 107, 0.8) 0%, rgba(50, 55, 75, 0.8) 33.81%, rgba(1, 1, 1, 0.8) 71.33%);
        padding: 0.9375rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        &:last-child {
          margin-bottom: 0.625rem;
        }
        .con {
          flex: 1;
          min-width: 0;
          margin-right: 0.625rem;
        }
        h3 {
          font-size: 0.9375rem;
          color: #fff;
          font-weight: 400;
        }
        p {
          color: rgb(134, 138, 174);
          margin-top: 0.3125rem;
        }
      }
    }
  }
}
</style>